<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>jQuery转DOM对象</h1>
    <ul>
        <li>jquery对象[index]</li>
        <li>jquery对象.get(index)</li>
    </ul>
    <h2>eq方法</h2>
    <p>jquery对象.eq(index)</p>
    <p>获取第n个单独的jquery对象</p>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div2">div2</div>
</body>
<script src="../jquery-3.6.0.min.js"></script>
<script>

    let $div = $(".div1");
    // jQuery对象：实际上是一个伪数组（可以使用length属性和for...of循环）
    console.log($div.length);
    for (let v of $div) {
        console.log(v);
    }

    // 得到jquery对象，由多个class为div2的div构成
    let $divs = $(".div2");
    // 获取指定索引处的dom对象
    let div1 = $div[0];
    let div2 = $divs[0];
    // get方法也可以获取指定索引处的dom对象
    let div3 = $divs.get(1);

    div1.style.color = "#f00";
    div2.style.color = "#0f0";
    div3.style.color = "#00f";

    $divs.eq(1).css("backgroundColor","#000");

</script>

</html>